<template>
	<view class="main">
		<view class="header">
			<view class="headerBox">
				<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/qianjin.png" alt="" />
			</view>
		</view>
		<view class="mainBox">
			<view class="title">
				<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/预约门店鉴赏.png" alt="" />
			</view>
			<view class="inputBox">
				<view class="inputItem">南京仟金传家旗舰店</view>
				<view class="inputItem">2024.01.06 10:30 - 15:00</view>
				<view class="inputItem item">
					<input v-model="nameValue" placeholder="姓名" />
					<van-radio-group value="{{sexChecked}}" class="radio-group" @change="changeSex">
						<van-radio :name="1" class="radio">先生</van-radio>
						<van-radio :name="2" class="radio">女士</van-radio>
					</van-radio-group>
				</view>
				<view class="inputItem item">
					<input v-model="phoneValue" placeholder="电话" />
					<button>一键授权</button>
				</view>
			</view>
			<view class="notes">
				<span>备注</span>
				<input class="nodeInput" v-model="notesValue" rows="1" autosize type="textarea" placeholder="请输入留言" />
			</view>
			<view class="order">
				<button class="orderBtn" @click="postOrder">提交预约</button>
				<view class="radiosGroup">
					<view class="radios" @click="onChange" v-if="termChecked == true">
						<image src="https://qianjin-file.oss-cn-beijing.aliyuncs.com/app/static/check.png" alt="" />
					</view>
					<view class="activeRadios" @click="onChange" v-else="termChecked == false"> </view>
					<text @click="onChange">我已阅读并同意隐私条款同意仟金传家获取我的个人信息</text>
				</view>



			</view>
		</view>
		<!-- 		<van-toast v-model:show="showMessage" style="padding: 0">
			<template #message> {{ messageValue }} </template>
		</van-toast> -->

		<view v-if="showMessage" style="padding: 0" class="toast">
			<text> {{messageValue}}</text>
		</view>
	</view>
</template>

// <script>
	// 		export default {

	// 			onLoad: function(option) {
	// 				route.value = option
	// 				console.log(option);
	// 			},
	// 		}

	// 
</script>

<script setup>
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		onMounted,
		ref
	} from "vue";
	import {
		postActiveOrder
	} from "../../common/api.js";

	const route = ref();
	const nameValue = ref("");
	const phoneValue = ref("");
	const sexChecked = ref(1);
	const notesValue = ref("");
	const termChecked = ref(true);
	const showMessage = ref(false);
	const messageValue = ref("请输入姓名");



	onMounted(() => {
		console.log(',', getCurrentPages());
		route.value = getCurrentPages()[1].options
	})
	const onChange = () => {
		termChecked.value = !termChecked.value
	}
	const  changeSex = (val)=>{
		console.log(val);
		sexChecked.value = val.detail
	}
	const showMessageBox = (show, val) => {
		showMessage.value = show;
		messageValue.value = val;
		setTimeout(() => {
			showMessage.value = false;
		}, 2000)
	};
	const postOrder = () => {
		if (nameValue.value.length == 0) {
			showMessageBox(true, "请输入姓名");
		} else if (phoneValue.value.length == 0) {
			showMessageBox(true, "请授权手机号");
		} else if (termChecked.value == false) {
			showMessageBox(true, "请先阅读并勾选条款");
		} else {
			postActiveOrder({
				activityId: route.value.activeId,
				sex: sexChecked.value,
				username: nameValue.value,
				remark: notesValue.value,
			}).then((res) => {
				console.log(res);
				showMessageBox(true, "操作成功");
				uni.navigateTo({
				    url: 'orderSuccess?activeOrderId='+res.data.data+'&startTime='+route.value.startTime
				})
				// router.push({
				// 	name: "OrderSuccess",
				// 	query: {
				// 		activeOrderId: res.data,
				// 		startTime: route.value.startTime,
				// 	},
				// });
			});
		}
	};
</script>

<style lang="scss" scoped>
	.main {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		overflow-y: scroll;
		width: 100vw;
		height: 100vh;
		background-color: $sys_theme;
  color: $color-text;
		.mainBox {
			box-sizing: border-box;
			height: 87.44vh;
			padding: 0 7.46vw;

			// background-color: red;
			.title {
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				height: 3.51vh;

				image {
					width: 33.6vw;
					height: 100%;
				}
			}

			.inputBox {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 32.57vh;
				width: 100%;
				margin-top: 5.98vh;

				.inputItem {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 5.049vh;
					width: 100%;
					border: 3px solid $color-text;
					font-weight: 600;
					color: $color-text;
					box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.39) inset;
					border-radius: 10px 10px 10px 10px;
				}

				.item {
					justify-content: space-between;
					border: 0;
					box-shadow: none;
				}
			}

			.notes {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: flex-start;
				height: 17.18vh;
				width: 100%;
				margin-top: 2.46vh;

				// background-color: red;
				::v-deep .van-cell {
					width: 100%;
					// padding-left: 14px;
					padding: 2vw;
				}

				::v-deep .van-cell-group--inset {
					width: 100%;
					height: 75%;
				}

				::v-deep .van-field__body {
					display: flex;
					flex-direction: column;
					width: 100%;
				}

				span {
					font-size: $font-size-medium;
					font-weight: 600;
				}
			}

			.order {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				margin-top: 5.67vh;
				height: 9.61vh;

				.orderBtn {
					width: 52%;
					height: 4.62vh;
					font-weight: bold;
					border-radius: 5.07vw;
				}

				a {
					color: $color-text;
				}
			}

			button {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30.8vw;
				height: 72%;
				border-radius: 0.625rem;
				background-color: $color-text;
				border: 0;
				color: $sys_theme;
				margin: 0;
			}
		}

		.header {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			position: absolute;
			top: 0;
			z-index: 99999999;
			height: 10.61vh;
			width: 100%;

			.headerBox {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 48.7%;

				image {
					width: 27.73vw;
					height: 100%;
				}
			}
		}
	}

	input {
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 42.53vw;
		height: 5.05vh;
		// text-align: center;
		border-radius: 10px 10px 10px 10px;
		border: 3px solid $color-text;
		box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.39) inset;
		padding-left: 7.07vw;
	}

	.nodeInput {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		color: $color-text;
		height: 12.87vh;
		width: 100%;
	}

	.radiosGroup {
		display: flex;

		.radios {
			display: flex;
			height: 3.07vw;
			width: 3.07vw;
			border-radius: 50%;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.activeRadios {
			height: 2.67vw;
			width: 2.67vw;
			border-radius: 50%;
			border: 1px solid $color-text;
		}

		text {
			margin-left: 2.67vw;
			color: $color-text;
			font-size: 2.4vw
		}
	}




	.radio-group {
		height: 100%;
		width: 37.99%;
	}


	.toast {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 50%;
		left: 30%;
		// width: 60vw !important;
		// height: 10vh !important;
		// background-color: ;

		min-height: 1.72vh;
		padding: 2.67vw;
		background-color: black;
		opacity: 0.5;
		border-radius: 3vw;

		text {
			color: $color-text;
			line-height: 3vh;
			padding: 2.22vh 10vw;
			font-size: 3.4vw !important;
		}
	}

	::v-deep .van-radio-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		width: 100%;
	}

	::v-deep .van-radio__label {
		color: $color-text;
	}

	::v-deep .van-radio__icon--checked .van-icon {
		background-color: $color-text;
		border-color: $color-text;
	}

	::v-deep .van-radio__icon {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 3.07vw;
		width: 3.07vw;
		font-size: 2vw;
	}

	::v-deep .van-icon-success {
		// overflow: hidden;
		height: 3.07vw;
		width: 3.07vw;
		border-radius: 50%;
	}

	::v-deep .van-icon-success:before {
		display: flex;
		align-items: center;
		overflow: hidden;
		height: 3.07vw;
		width: 3.07vw;
		border-radius: 50%;
	}

	::v-deep .van-radio__icon {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	::v-deep .van-checkbox__label {
		color: $color-text;
		font-size: 2.4vw;
	}
</style>